<template>
  <section class="main">
    <a-card style="margin-top: 24px" :bordered="false" title="饮食记录">
      <template slot="extra">
        <a-button
          v-for="item in duringTime"
          :key="item.value"
          :type="queryParam.period == item.value ? 'danger' : ''"
          :style="{ marginLeft: '7px' }"
          @click="loadData(item.value)"
          >{{ item.text }}</a-button
        >
      </template>
      <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
        <a-button type="primary" @click="handleAdd">添加</a-button>
      </div>
      <template v-if="listDataSource.length > 0">
        <a-table
          ref="table"
          bordered
          size="middle"
          :rowKey="new Date() + 'date'"
          :columns="listColumns"
          :dataSource="listDataSource"
          :pagination="ipagination"
          :loading="listDataLoading"
          @change="
            (pagination, filters, sorter, currentDataSource) =>
              handleTableChange(pagination, filters, sorter, currentDataSource, 'getList')
          "
        >
          <template slot="suggestion" slot-scope="text, record">
            <div v-if="record.suggestion.suggest">
              <div>
                <span style="color:rgba(0, 0, 0, 0.65);margin-right:10px">{{ record.suggestion.doctor }}</span
                ><span style="color:rgba(0, 0, 0, 0.65)">{{ record.suggestion.recordDate }}</span>
                <a style="float:right" @click="handleDelete(record)">删除</a>
              </div>
              <p>{{ record.suggestion.suggest }}</p>
              <div v-if="record.suggestion.hasAdd" style="text-align:right">
                <img style="width:20px;heigth:20px" src="~@/assets/foodAdvise.png" />
                <a @click="handleAddAdvise(record)">新增建议</a>
              </div>
            </div>
            <div v-else style="display:flex;align-items: center;justify-content: center;">
              <img style="width:20px;heigth:20px" src="~@/assets/foodAdvise.png" />
              <a @click="handleAddAdvise(record)">新增建议</a>
            </div>
          </template>
          <template slot="score" slot-scope="text">
            <span :style="text | rateColor">{{ text }}</span>
          </template>
        </a-table>
      </template>
      <template v-else>
        <div class="no-data"><a-icon type="frown-o" />暂无数据</div>
      </template>

      <food-modal ref="modalForm" @ok="modalFormOk"></food-modal>
      <food-add-advise ref="addAdvise" @ok="addAdviseOk"></food-add-advise>
    </a-card>
  </section>
</template>

<script>
import { BloodProfileMixin } from '@/mixins/BloodProfileMixin'
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import FoodAddAdvise from './modules/FoodAddAdvise'
import FoodModal from './modules/FoodModal'
import { postAction, deleteAction } from '../../api/manage'

export default {
  name: 'Food',
  mixins: [BloodProfileMixin],
  components: {
    FoodModal,
    FoodAddAdvise
  },
  data() {
    return {
      queryParam: { patientId: this.$route.query[PAGE_MENU_TYPE.PatientId], type: 3, period: 0 },
      listColumns: [
        {
          title: '日期',
          align: 'center',
          key: 'date',
          dataIndex: 'date',
          width: 120,
          customRender: (text, record, index) => {
            const obj = {
              children: text !== null ? text : '',
              attrs: {}
            }
            obj.attrs.rowSpan = this.mergeCell(text, this.listDataSource, 'date', index)
            return obj
          }
        },
        {
          title: '监测项',
          align: 'center',
          width: 120,
          key: 'recordType',
          dataIndex: 'recordType',
          customRender: (text, record, index) => {
            const template = text && (
              <div>
                <p>{text}</p>
                <p>{record.recordTime}</p>
              </div>
            )
            const obj = {
              children: text ? template : '',
              attrs: {}
            }
            obj.attrs.rowSpan = this.mergeCell(text, this.listDataSource, 'recordType', index)
            return obj
          }
        },
        {
          title: '图片',
          align: 'center',
          dataIndex: 'recordPhoto',
          key: 'recordPhoto',
          width: 120,
          customRender: (text, record, index) => {
            const template = text && (
              <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
                <div>
                  <img
                    style="width: 80px; height: 80px;"
                    src={text.split(',')[0]}
                    preview={this.listDataSource[index]['recordId']}
                  />
                  {text.split(',').map((v, i) => {
                    return (
                      i !== 0 && (
                        <img style="width: 0; height: 0;" src={v} preview={this.listDataSource[index]['recordId']} />
                      )
                    )
                  })}
                </div>
              </div>
            )
            const obj = {
              children: text !== null ? template : '',
              attrs: {}
            }
            obj.attrs.rowSpan = this.mergeCell(text, this.listDataSource, 'recordPhoto', index)
            return obj
          }
        },
        {
          title: '饮食情况',
          align: 'center',
          dataIndex: 'remark',
          key: 'remark',
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: '得分',
          align: 'center',
          dataIndex: 'score',
          width: 120,
          key: 'score',
          scopedSlots: { customRender: 'score' }
        },
        {
          title: '建议',
          dataIndex: 'suggestion',
          key: 'suggestion',
          scopedSlots: { customRender: 'suggestion' }
        }
      ],
      url: {
        // 按日期分组获取患者饮食记录
        getList: '/101/02/1010202'
      }
    }
  },
  filters: {
    rateColor(text) {
      if (text > 1 && text < 5) {
        return 'color:#D9321F'
      } else if (text > 4 && text < 8) {
        return 'color:#D9A71F'
      } else if (text > 7 && text < 11) {
        return 'color:#1FD944'
      } else {
        return ''
      }
    }
  },
  methods: {
    mergeCell(text, data, key, index) {
      if (index !== 0 && text == data[index - 1][key] && data[index - 1]['date'] == data[index]['date']) {
        return 0
      }
      let rowSpan = 1
      for (let i = index + 1; i < data.length; i++) {
        if (text !== data[i][key] || data[i]['date'] !== data[index]['date']) {
          break
        }
        rowSpan++
      }
      return rowSpan
    },
    handleAddAdvise(record) {
      this.$refs.addAdvise.add(record)
    },
    handleDelete(record) {
      deleteAction('/signin/suggest/delete', { id: record.suggestion.dataId }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    addAdviseOk() {
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}
.table-operator {
  margin-bottom: 10px;
}

.clName .ant-tree li span.ant-tree-switcher,
.ant-tree li span.ant-tree-iconEle {
  width: 10px !important;
}

.clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #1890ff !important;
}
.ant-table {
  color: rgba(0, 0, 0, 0.85);
}
</style>

